<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>WireIt - jsBox example</title>
	<link rel="icon" href="../../res/favicon.ico" type="image/png" />
  <link rel="SHORTCUT ICON" href="../../res/favicon.ico" type="image/png" />

<!-- YUI -->
<link rel="stylesheet" type="text/css" href="../../lib/yui/reset-fonts-grids/reset-fonts-grids.css" />
<link rel="stylesheet" type="text/css" href="../../lib/yui/assets/skins/sam/skin.css" />

<!-- InputEx CSS -->
<link type='text/css' rel='stylesheet' href='../../lib/inputex/css/inputEx.css' />

<!-- YUI-accordion CSS -->
<link rel="stylesheet" type="text/css" href="../../lib/accordionview/assets/skins/sam/accordionview.css" />

<!-- WireIt CSS -->
<link rel="stylesheet" type="text/css" href="../../css/WireIt.css" />
<link rel="stylesheet" type="text/css" href="../../css/WireItEditor.css" />

<style>
div.WireIt-Container {
	width: 200px; /* Prevent the modules from scratching on the right */
	/*height: 100px;*/
}

#toolbar #WiringEditor-runButton.yui-button {
	margin-left: 30px;
	font-size: 12px;
}

#WiringEditor-runButton button {
	background: transparent url(../../images/icons/bullet_go.png) no-repeat scroll 10% 50%;
	font-weight: bold;
}

div.WireIt-Container div.inputEx-Group div.inputEx-label {
	width: auto;
}

div.inputEx-TypeField-PropertiesPanel {
	z-index: 7;
}



/* Comment Module */
div.WireIt-Container.WiringEditor-module-comment { width: 200px; }
div.WireIt-Container.WiringEditor-module-comment div.body { background-color: #EEEE66; }
div.WireIt-Container.WiringEditor-module-comment div.body textarea { background-color: transparent; font-weight: bold; border: 0; }


/* Composed Module */
div.ComposedModule { background-color: #DDDDAA; }

</style>



<!-- YUI -->
<script type="text/javascript" src="../../lib/yui/utilities/utilities.js"></script>
<script type="text/javascript" src="../../lib/yui/resize/resize-min.js"></script>
<script type="text/javascript" src="../../lib/yui/layout/layout-min.js"></script>
<script type="text/javascript" src="../../lib/yui/container/container-min.js"></script>
<script type="text/javascript" src="../../lib/yui/json/json-min.js"></script>
<script type="text/javascript" src="../../lib/yui/button/button-min.js"></script>

<!-- InputEx with wirable options (WirableField-beta) -->
<script src="../../lib/inputex/js/inputex.js"  type='text/javascript'></script>
<script src="../../lib/inputex/js/Field.js"  type='text/javascript'></script>
<script type="text/javascript" src="../../js/util/inputex/WirableField-beta.js"></script>
<script src="../../lib/inputex/js/Group.js"  type='text/javascript'></script>
<script src="../../lib/inputex/js/Visus.js"  type='text/javascript'></script>
<script src="../../lib/inputex/js/fields/StringField.js"  type='text/javascript'></script>
<script src="../../lib/inputex/js/fields/Textarea.js"  type='text/javascript'></script>
<script src="../../lib/inputex/js/fields/SelectField.js"  type='text/javascript'></script>
<script src="../../lib/inputex/js/fields/IntegerField.js"  type='text/javascript'></script>
<script src="../../lib/inputex/js/fields/NumberField.js"  type='text/javascript'></script>
<script src="../../lib/inputex/js/fields/EmailField.js"  type='text/javascript'></script>
<script src="../../lib/inputex/js/fields/UrlField.js"  type='text/javascript'></script>
<script src="../../lib/inputex/js/fields/ListField.js"  type='text/javascript'></script>
<script src="../../lib/inputex/js/fields/CheckBox.js"  type='text/javascript'></script>
<script src="../../lib/inputex/js/fields/InPlaceEdit.js"  type='text/javascript'></script>
<script src="../../lib/inputex/js/fields/ColorField.js"  type='text/javascript'></script>
<script src="../../lib/inputex/js/fields/TypeField.js"  type='text/javascript'></script>

<!-- YUI-Accordion -->
<script src="../../lib/accordionview/accordionview-min.js"  type='text/javascript'></script>

<!-- WireIt -->
<!--[if IE]><script type="text/javascript" src="../../lib/excanvas.js"></script><![endif]-->
<script type="text/javascript" src="../../js/WireIt.js"></script>
<script type="text/javascript" src="../../js/CanvasElement.js"></script>
<script type="text/javascript" src="../../js/Wire.js"></script>
<script type="text/javascript" src="../../js/Terminal.js"></script>
<script type="text/javascript" src="../../js/util/DD.js"></script>
<script type="text/javascript" src="../../js/util/DDResize.js"></script>
<script type="text/javascript" src="../../js/Container.js"></script>
<script type="text/javascript" src="../../js/Layer.js"></script>
<script type="text/javascript" src="../../js/util/inputex/FormContainer-beta.js"></script>
<script type="text/javascript" src="../../js/LayerMap.js"></script>
<script type="text/javascript" src="../../js/WiringEditor.js"></script>
<script type="text/javascript" src="../../js/adapters/json-rpc.js"></script>
<script type="text/javascript" src="../../js/ImageContainer.js"></script>

<script type="text/javascript" src="jsBox.js"></script>
<script type="text/javascript" src="ExecutionFrame.js"></script>
<script>
// Init the jsBox editor with a default program
YAHOO.util.Event.onDOMReady( jsBox.init, jsBox, true);
</script>

</head>

<body class="yui-skin-sam">

	<div id="top">
		<div class="logo">jsBox</a></div>
		<div id="toolbar"></div>
		<div class="topright">
			<span>Hello there !</span> | 
			<a href="../..">back to WireIt</a>
		</div>
	</div>


	<div id="left">
	</div>
	
	<div id="right">
		<ul id="accordionView">
			<li>
				<h2>Properties</h2>
				<div>
					<div id="propertiesForm"></div>
				</div>
			</li>
			<li>
				<h2>Minimap</h2>
				<div style='position: relative;'>
					<div id="layerMap"></div>
				</div>
			</li>
			<li>
				<h2>Infos</h2>
				<div>
				  <div style="padding: 10px;">
	        		<p style="font-weight: bold;">What this example does :</p>
					<ul style="margin-left: 20px;">
						<li>* Define a visual language of 5 modules: input, output, jsBox, callback, comment</li>
						<li>* Creates the "jsBox" container</li>	
						<li>* Creates the "Composed" container</li>
						<li>* Hack the WiringEditor to handle the composed modules</li>
						<li>* Provide a small virtual machine for executing this language</li>
					</ul>
					<br />
					<p style="font-weight: bold;">How to use it :</p>
					<ul style="margin-left: 20px;">
						<li>* Drag and drop modules from the Module list to the working layer.</li>
						<li>* Create a module with inputs, outputs and jsBox modules (or load an existing one)</li>
						<li>* Press the "Run" button to run the code within the same window</li>
					</ul>
					<br />
					<p><u><b>Warning:</b></u> Composed modules are shared anonymously. <br />Someone could change/delete your modules or create evil ones !</p>
					<br />
					<p>Sources: <a href="jsBox.js" target="_new">jsBox.js</a> and <a href="ExecutionFrame.js" target="_new">ExecutionFrame.js</a></p>
				  </div>
				</div>
			</li>
		</ul>
	</div>

	<div id="center">
	</div>

	

	<div id="helpPanel">
	    <div class="hd">Welcome to jsBox</div>
	    <div class="bd" style="text-align: left;">
	
					<p>This is an advanced example of the WiringEditor from the <a href="http://javascript.neyric.com/wireit">WireIt library</a>.</p>
					<br />
	        <p style="font-weight: bold;">What this example does :</p>
					<ul style="margin-left: 20px;">
						<li>* Define a visual language of 5 modules: input, output, jsBox, callback, comment</li>
						<li>* Creates the "jsBox" container</li>	
						<li>* Creates the "Composed" container</li>
						<li>* Hack the WiringEditor to handle the composed modules</li>
						<li>* Provide a small virtual machine for executing this language</li>
					</ul>
					<br />
					<p style="font-weight: bold;">How to use it :</p>
					<ul style="margin-left: 20px;">
						<li>* Drag and drop modules from the Module list to the working layer.</li>
						<li>* Create a module with inputs, outputs and jsBox modules (or load an existing one)</li>
						<li>* Press the "Run" button to run the code within the same window</li>
					</ul>
					<br />
					<p><u>Warning:</u> Composed modules are shared anonymously. <br />Someone could change/delete your modules or create evil ones !</p>
					<br />
					<p>Sources: <a href="jsBox.js" target="_new">jsBox.js</a> and <a href="ExecutionFrame.js" target="_new">ExecutionFrame.js</a></p>
		
	    </div>
	</div>

	

</body>
</html>